<template>
    <div>
        <home-header></home-header>
        <home-swiper></home-swiper>
        <home-icons></home-icons>
        <home-bodyimg></home-bodyimg>
        <home-recommend :itemListRecommend="itemListRecommend"></home-recommend>
        <home-weekend :itemListWeekend="itemListWeekend"></home-weekend>
    </div>
</template>

<script>
    import HomeHeader from "./components/Header"
    import HomeSwiper from "./components/Swiper"
    import HomeIcons from "./components/Icons"
    import HomeRecommend from "./components/Recommend"
    import HomeBodyimg from "./components/BodyImg"
    import HomeWeekend from "./components/Weekend"
    import axios from 'axios'
    import  { mapState } from "vuex"

    export default{
        name:"Home",
        components:{
            HomeHeader,
            HomeSwiper,
            HomeIcons,
            HomeRecommend,
            HomeBodyimg,
            HomeWeekend
        },
        data (){
            return {
                lastCity:"",
                itemListRecommend:[],
                itemListWeekend:[]
            }
        },  
        computed:{
            ...mapState(["city"])
        },
        methods:{
             getHomeInfo(){
                 axios.get('/api/index.json?city='+this.city+'').then(this.getHomeInfoSucc)
             },
             getHomeInfoSucc(res){
                 console.log(res.data.data);
                 let data = res.data.data
                 this.itemListRecommend = data.itemListRecommend;
                 this.itemListWeekend = data.itemListWeekend
                 
                 
             }
        },
        mounted (){
            this.getHomeInfo(),
            this.lastCity = this.city
        },
        activated(){
            if(this.lastCity!==this.city){
                this.getHomeInfo();
                this.lastCity = this.city
            }
        }
    }
</script>

<style lang="">
    
</style>